<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <link th:href="@{/css/update.css}" rel="stylesheet"/>
    <th:block th:include="include :: header('新增测试')" />
    <link th:href="@{/ajax/libs/bootstrap-fileinput/fileinput.min.css}" rel="stylesheet"/>
</head>
<body class="">
    <div class="main-content ">
        <form class="form-horizontal" id="form-test-add">
            <input th:value="${files}" id="files" hidden/>
            <input id="initialPreview" hidden/>
            <input id="initialPreviewConfig" hidden/>
        <div class="row">
        </div>
            <!--<div class="row">-->
                <!--<div class="col-sm-12">-->
                <!--<div class="ibox-content">-->
                    <!--<div class="form-group">-->
                        <!--<label class="font-noraml">简单示例</label>-->
                        <!--<div class="file-loading">-->
                            <!--<input class="file" id="fileinput-demo-one" type="file" multiple data-theme="fas">-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="font-noraml">多文件上传</label>
                        <div class="file-loading">
                            <input id="fileinput-demo-1" type="file" multiple data-min-file-count="1" data-theme="fas">
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:src="@{/ajax/libs/bootstrap-fileinput/fileinput.min.js}"></script>


    <script th:inline=="javascript">
        var prefix = ctx + "netintech/test"
        $("#form-test-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            $.modal.close();
        }

        $(document).ready(function () {
            var control = $('#fileinput-demo-1');

            var files= [[${files}]];
            var initialPreview = new Array();
            var initialPreviewConfig = new Array();
            for(var i = 0;i<files.length;i++){
                var imgs = "";
                imgs = "<img src='"+files[i].filePath+"' class='file-preview-image kv-preview-data'>";
                initialPreview[i] = imgs;

                var config = {};
                config.caption = files[i].fileName;
                config.url = prefix + "/removeFile";
                config.key = files[i].fileId;
                initialPreviewConfig[i]=config;
            }
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: prefix + '/demo/upload', //上传的地址
                deleteUrl: prefix + '/removeFile',//删除图片地址
                //allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀
                showUpload: true, //是否显示上传按钮
                showCaption: true,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                preferIconicPreview: true,
                overwriteInitial: false,//覆盖初始化
                showRemove: false, //是否显示清除按钮
                autoReplace: true,
                enctype: 'multipart/form-data',
                initialPreview: initialPreview,
                //caption 文件名称   size文件大小   url 删除路径  key 图片id
                initialPreviewConfig: initialPreviewConfig,
                //preferIconicPreview: true, // 开启用图标替换预览效果
                previewFileIconSettings: { // configure your icon file extensions
                    'doc': '<i class="fa fa-file-word-o text-primary"></i>',
                    'xls': '<i class="fa fa-file-excel-o text-success"></i>',
                    'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
                    'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
                    'txt': '<i class="fa fa-file-text-o text-info"></i>',
                    'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
                    'htm': '<i class="fa fa-file-code-o text-info"></i>',
                    'mov': '<i class="fa fa-file-movie-o text-warning"></i>',
                    'mp3': '<i class="fa fa-file-audio-o text-warning"></i>'
                },
                previewFileExtSettings: {
                    'doc': function(ext) {
                        return ext.match(/(doc|docx)$/i);
                    },
                    'xls': function(ext) {
                        return ext.match(/(xls|xlsx)$/i);
                    },
                    'ppt': function(ext) {
                        return ext.match(/(ppt|pptx)$/i);
                    },
                    'zip': function(ext) {
                        return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
                    },
                    'htm': function(ext) {
                        return ext.match(/(htm|html)$/i);
                    },
                    'mov': function(ext) {
                        return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);
                    },
                    'mp3': function(ext) {
                        return ext.match(/(mp3|wav)$/i);
                    },
                    'txt': function(ext) {
                        return ext.match(/(txt|ini|csv|java|php|js|css)$/i);
                    }
                }
            });
            //files为fileinput控件ID，
            $('#fileinput-demo-1').on('fileuploaded', function (e, data, previewId, index) {
                //在上传成功事件中将服务器返回的所需数据，添加到该文件对应的div中
                $('#' + previewId).attr('fileId', data.response.fileId);
            }).on('filesuccessremove', function (event, previewId, extra) {
                //在移除事件里取出所需数据，并执行相应的删除指令
                var id = $('#' + previewId).attr('fileId');
                console.log(event)
                console.log(previewId)
                deleteFile(id);
            }).on('filedeleted', function (event, key) {
                console.log("key",key);
            });
        });

            function deleteFile(id){
                var formdata = new FormData();
                formdata.append("key", id);
                $.ajax({
                    url: prefix + '/removeFile',
                    data: formdata,
                    type: "post",
                    processData: false,
                    contentType: false,
                    success: function(result) {

                    }
                })
            }

    </script>
</body>
</html>